<template>
  <div>
    <div class="group">
      <!-- <div class="van-hairline--bottom">
        <van-cell title="grr 13585" value="地址" label="地址" />
      </div>-->
      <van-contact-card
        v-if="site.site"
        type="edit"
        :name="`${site.name} ${site.site}`"
        :tel="site.coll"
        :editable="true"
        @click="skip"
      />

      <van-contact-card
        v-else
        type="add"
        name="currentContact.name"
        tel="currentContact.tel"
        @click="skip"
      />
      <van-card
        v-for="(item ,index) in shoopData"
        :key="index"
        :num="item.num"
        :price="item.newPrice"
        :desc="item.info"
        :title="item.title"
        :thumb="item.imgurl"
      >
        <template #tags></template>
        <template #footer>总价：{{item.newPrice * item.num}}</template>
      </van-card>
      <van-cell-group style="margin-top:10px">
        <van-cell title="商品合计" :value="`￥${total}`" />
        <van-cell title="拼团优惠券" value="无可用" is-link />
        <van-cell title="运费" value="免运费" />
      </van-cell-group>
      <div>
        <div class="cells">
          <div>
            <h3>蜜芽拼团</h3>
            <span style="font-size:12px;margin-left:10px">此商品正在参加拼团活动</span>
          </div>
          <span>规则说明 ></span>
        </div>
        <van-steps :active="active">
          <van-step>买家下单</van-step>
          <van-step>商家接单</van-step>
          <van-step>买家提货</van-step>
          <van-step>交易完成</van-step>
        </van-steps>
      </div>
    </div>
    <div class="dibu van-hairline--top">
      <div>
        <span>应付金额：</span>
        <span style="font-size:24px;margin-left:3px;color:#ea4141">${{total}}</span>
      </div>
      <div class="btn" @click="payment">立即支付</div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { gwlocal, jzlocal } from "../utils/localStorage";
import { tokenCook } from "../utils/cookies";
export default {
  name: "groupon",
  data() {
    return {
      value: 0,
      active: 1,
      shoopData: [],
      total: 0,
      site: {},
    };
  },
  methods: {
    ...mapActions("home", ["getShoop"]),
    ...mapActions("login", ["getinfo"]),
    ...mapActions("site", ["mrSite"]),
    skip() {
      this.$router.push("/Lsite");
    },
    siteFn(item) {
      if (item) {
        this.site = item;
        let siteArr = [];
        item.site = JSON.parse(item.site);
        item.site.forEach((v) => {
          siteArr.push(v.name);
        });
        this.site.site = siteArr.join(" ");
      }
    },
    payment() {
      let lj = jzlocal.get();
      let gw = gwlocal.get();
      // 清楚购物车商品
      lj.forEach((v) => {
        gw.slice().find((o, i) => {
          if (v.id == o.id && v.bm == o.bm) {
            gw.splice(i, 1);
          }
        });
      });
      gwlocal.set(gw);
    },
  },
  async mounted() {
    this.shoopData = jzlocal.get();
    // 获取商品
    let ids = [];
    this.shoopData.forEach((v) => {
      if (!ids.includes(v.id)) {
        ids.push(v.id);
      }
    });

    let r = await this.getShoop({ ids: ids.join(",") });
    this.shoopData = this.shoopData.map((v) => {
      let item = r.find((r) => r.id == v.id);
      this.total += item.newPrice * v.num;
      v = { ...v, ...item };
      return v;
    });
    this.total = this.total.toFixed();
    let token = tokenCook.get();
    if (!token) {
      this.$router.push("/login");
      return;
    }
    let { uid } = await this.getinfo(token);
    let siteobj = await this.mrSite({ uid, priority: 1 });
    this.siteFn(siteobj);
  },
};
</script>

<style scoped>
.group {
  position: absolute;
  top: 0;
  bottom: 50px;
  width: 100%;
  background-color: #f5f5f5;

  overflow: hidden;
  overflow-y: auto;
}

.cells {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  padding: 10px;
  margin-top: 10px;
}

.cells > div {
  display: flex;
  align-items: center;
}

.dibu {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 50px;
  background-color: #ffffff;
  z-index: 99999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
  box-sizing: border-box;
}

.btn {
  width: 110px;
  height: 100%;
  font-size: 0.35rem;
  color: #ffffff;
  text-align: center;
  line-height: 50px;
  background-color: #ea4141;
}

.van-card {
}
</style>